<template>
    <div id="app" style="padding: 10px;">
        <div>
            <el-upload
                    v-if="false"
                    class="upload-demo"
                    ref="upload"
                    :action="`http://${origin}/upload`"
                    :auto-upload="true"
                    :show-file-list="false"
                    :on-success="r => uploadSuccess(r)"
                    :before-upload="f => beforeUpload(f)"
                    :on-progress="onProgress"
                    style="margin-bottom: 10px;"
            >
                <el-button slot="trigger" type="primary" icon="el-icon-upload2" size="small">
                    上传更新包
                </el-button>
            </el-upload>
        </div>
        <el-table :data="list" border>
            <el-table-column label="服务名">
                <template slot-scope="scope">
                    {{scope.row.name}}
                </template>
            </el-table-column>
            <el-table-column label="是否在线">
                <template slot-scope="scope">
                    <template v-if="scope.row.health">
                        <i class="el-icon-success" style="color: #67C23A" v-if="getOnline(scope.row.name) === '是'"/>
                        <i class="el-icon-warning" v-else style="color: #F56C6C"/>
                        <span>
                        {{getOnline(scope.row.name)}}
                        </span>
                    </template>
                    <template v-else>
                        未配置在线检测
                    </template>
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button type="text" v-if="scope.row.start" @click="start(scope.row.name)">启动</el-button>
                    <el-button type="text" v-if="scope.row.stop" @click="stop(scope.row.name)">停止</el-button>
                    <el-button type="text" v-if="scope.row.restart" @click="restart(scope.row.name)">重启</el-button>
                    <el-button type="text" @click="log(scope.row)" v-if="scope.row.log">日志</el-button>

                    <el-upload
                            v-if="scope.row.update"
                            class="upload-demo"
                            ref="upload"
                            :action="`http://${origin}/upload`"
                            :data="extData"
                            :auto-upload="true"
                            :show-file-list="false"
                            :on-success="r => uploadSuccess(r, scope.row.name)"
                            :before-upload="f => beforeUpload(f)"
                            :on-progress="onProgress"
                            style="display: inline-block; margin-left: 8px;"
                    >
                        <el-button slot="trigger" type="text" >
                            更新
                        </el-button>
                    </el-upload>
<!--                    <el-button type="text" @click="update(scope.row.name)">更新</el-button>-->
                </template>
            </el-table-column>
        </el-table>

        <el-divider style="margin-top: 20px;">
            修改日志
        </el-divider>


        <changelog />
        <log_dialog ref="logDialog" />
    </div>
</template>

<script>
    import Log_dialog from "./log_dialog";
    import Changelog from "./changelog";
    import {origin} from "../libs/util"
    var ws;
    // var logWs;

    // @ is an alias to /src
    import ReconnectingWebSocket from "../libs/websocket"
    export default {
        name: 'Home',
        components: {Log_dialog, Changelog},
        data() {
            return {
                list: [],
                online: {},
                origin: origin,
                uploadData: {
                    text: ""
                }
            }
        },
        computed:{
            extData(){
                return {
                    token: sessionStorage.getItem("token")
                }
            }
        },
        methods: {
            onProgress(event){
                this.uploadData.text = "上传进度: " + (event.percent.toFixed(2) + "%" )
                console.log(arguments)
            },
            beforeUpload(file, name) {
                if (!/\.zip$/.test(file.name)) {
                    this.$message.error("请上传正确的更新包")
                    return
                }
                this.$refs.logDialog.show(null, this.uploadData)
            },
            uploadSuccess(r, name) {
                if(r.fid){
                    this.$refs.logDialog.show(`ws://${this.origin}/update/${name}/${r.fid}?token=${sessionStorage.getItem("token")}`)
                }
                console.log(arguments)
            },
            send(event, data) {
                ws.send(JSON.stringify({
                    event,
                    data
                }))
            },
            log(item) {
                if(!item.log){
                    this.$message.error("管理员没有为我配置日志命令")
                    return
                }
                var name = item.name
                this.logValue = ""
                this.visible = true
                this.$refs.logDialog.show(`ws://${this.origin}/log/${name}?token=${sessionStorage.getItem("token")}`)
            },
            update() {
                alert("开发中")
            },
            start(name) {
                this.send("START", name)
            },
            stop(name) {
                this.send("STOP", name)
            },
            restart(name) {
                this.send("RESTART", name)
            },
            getOnline(name) {
                return this.online[name] ? "是" : "否"
            },
            onMessage(event, data) {
                switch (event) {
                    case "SYNC_ONLINE":
                        this.online = data
                        break
                    case "GET_LIST":
                        this.list = data
                        break
                }
            },

            init(){
                ws = new ReconnectingWebSocket(`ws://${this.origin}/webSocket/test?token=${sessionStorage.getItem("token")}`);
                ws.onopen = () => {
                    console.log(123)
                }
                ws.onmessage = (msg) => {
                    var d = JSON.parse(msg.data)
                    this.onMessage(d.event, d.data)
                    // this.list =
                    // console.log(msg)
                }
            }
        },
        mounted() {
            fetch(`http://${origin}/checkLogin?token=${sessionStorage.getItem("token")}`)
                .then(r => r.text())
                .then(r => {
                    if(r === "false"){
                        sessionStorage.clear()
                        this.$router.push("/")
                    } else {
                        this.init()
                    }
                    console.log(r)
                })
            // console.log(this.origin)
            // var origin = this.origin = process.env.VUE_APP_ORIGIN
            // console.log(origin)
            // if (!origin) {
            //     origin = this.origin = location.origin.replace(/https?:\/\//, "")
            //     if (origin.substring(origin.length - 1, origin.length) === '/') {
            //         this.origin = origin = origin.substring(0, origin.length - 1)
            //     }
            // }
        }
    }
</script>
